<script lang="ts" setup>
  import { useBScroll, useState, useDetailDatas } from '@/hooks';

  import FoodDetail from './Detail/Food.vue';
  import HotelDetail from './Detail/Hotel.vue';
  import KtvDetail from './Detail/Ktv.vue';
  import MassageDetail from './Detail/Massage.vue';
  import ViewDetail from './Detail/View.vue';

  defineOptions({
    name: 'DetailScrollWrapper'
  });

  const { wrapperRef } = useBScroll();
  const [errorShow, setErrorShow] = useState(false);
  const [loadingShow, setLoadingShow] = useState(false);

  const { detailData, queryField } = useDetailDatas(setLoadingShow, setErrorShow);
</script>

<template>
  <div class="scroll-wrapper" ref="wrapperRef">
    <div class="scroll-conetent">
      <template v-if="!errorShow">
        <loading :loading="loadingShow" />

        <detail-swiper :pic-datas="detailData.banners" />

        <!-- 美食详情 -->
        <food-detail
          v-if="queryField === 'food'"
          :name="detailData.name"
          :star="detailData.star"
          :score="String(detailData.score)"
          :address="detailData.address"
          :price="detailData.price"
          :createTime="detailData.createTime"
          :keywords="detailData.keywords || ''"
          :description="detailData.description"
          :recom="detailData.recom"
        />
        <!-- 酒店详情 -->
        <hotel-detail
          v-if="queryField === 'hotel'"
          :name="detailData.name"
          :star="detailData.star"
          :score="String(detailData.score)"
          :address="detailData.address"
          :price="detailData.price"
          :service="detailData.service"
        />

        <!-- Ktv 详情 -->
         <ktv-detail
          v-if="queryField === 'ktv'"
          :name="detailData.name"
          :star="detailData.star"
          :score="String(detailData.score)"
          :address="detailData.address"
          :price="detailData.price"
          :service="detailData.service"
        />

        <!-- 按摩详情 -->
         <massage-detail
          v-if="queryField === 'massage'"
          :name="detailData.name"
          :star="detailData.star"
          :score="String(detailData.score)"
          :address="detailData.address"
          :price="detailData.price"
          :createTime="detailData.createTime"
          :keywords="detailData.keywords || ''"
          :description="detailData.description"
          :recom="detailData.recom"
          :service="detailData.service"
         />

         <!-- 景点详情 -->
        <view-detail
          v-if="queryField === 'view'"
          :name="detailData.name"
          :star="detailData.star"
          :score="String(detailData.score)"
          :address="detailData.address"
          :price="detailData.price"
          :createTime="detailData.createTime"
          :description="detailData.description"
          :ticketInfo="detailData.ticketInfo"
        />
      </template>

      <bad-network :error-show="errorShow" />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
